<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
				
        <el-form :model="formData" ref="ruleForm">
			<el-form-item label="协议名称">
				<el-input style="width: 25%;" v-model="formData.name"></el-input>
			</el-form-item>
					
			<el-form-item label="所属班型">
				<el-cascader
					v-model="selectDefault"
					:options="selectOptions"
					placeholder="请选择"
					:props="selectProps"
					@change="handleChange">
				</el-cascader>
			</el-form-item>
			
			<el-form-item>
				<div style="color: #606266;font-weight: bold;">变量说明</div>
				<div style="color: #6d6d6d;text-align: center;">
					<el-row type="flex" justify="center">
						<el-col :span="12"><div>学员名称[username]</div></el-col>
						<el-col :span="12"><div>学员电话号码[Studentcellphonenumber]</div></el-col>
					</el-row>						
					<el-row type="flex" justify="center">
						<el-col :span="12"><div>学员证件号码[StudentIDcardnumber]</div></el-col>
						<el-col :span="12"><div>班型名称[coursename]</div></el-col>
					</el-row>
					<el-row type="flex" justify="center">
						<el-col :span="12"><div>成交价格[coursepay]</div></el-col>
						<el-col :span="12"><div>成交价大写[courseupperpay]</div></el-col>
					</el-row>
					<el-row type="flex" justify="center">
						<el-col :span="12"><div>用户签名[usercode]</div></el-col>
						<el-col :span="12"><div>公司合同章[companycode]</div></el-col>
					</el-row>
					<el-row type="flex" justify="center">
						<el-col :span="12"><div>签署日期[currentdate]</div></el-col>
						<el-col :span="12"><div>公司合同章[companycode]</div></el-col>
					</el-row>
				</div>

			</el-form-item>
  
			<quill-editor 
				v-model="content"
				ref="myQuillEditor"
				:options="editorOption"
				@blur="onEditorBlur($event)">
			</quill-editor>
			
			<div class="confirm-btn">
				<el-form-item>
					<el-button>取消</el-button>
					<el-button type="primary" @click="onSubmit">保存</el-button>
				</el-form-item>
			</div>
					
        </el-form>
				
				
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { parseTime } from '@/utils'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

import temRequest from '@/utils/tem-request'

export default {
  data() {
    return {
		formData: {
			name: ''
		},
		content: '',
		editorOption: {},
		editorHtml: '',
		
		selectProps: {
			expandTrigger: 'hover',
			value: 'id',
			label: 'name'
		},
		selectOptions: [],
		selectDefault: []
	}
  },
  created() {
	  let that = this
	  temRequest({
	    url: '/getCategory',
	    method: 'post',
	    data: {}
	  }).then(function(res){
	  	that.selectOptions = res.data
	  }).catch(function(err){
	  	console.log(err)
	  })
  },
  methods: {
    onSubmit(formName) {
		let that = this
		let temSelect = that.selectDefault
		if (that.formData.name === '' || that.content === '' || temSelect.length === 0) {
			that.$message.error('请检查是否填写完整')
			return false
		}
		temRequest({
		  url: '/createCategoryAgreement',
		  method: 'post',
		  data: {
			  protocol_category_id: temSelect[temSelect.length - 1],
			  protocol_name: that.formData.name,
			  protocol_content: that.content
		  }
		}).then(function(res){
			that.$message({
				type: 'success',
				message: '创建成功'
			})
		}).catch(function(err){
			console.log(err)
		})
    },
	onEditorBlur(quill) {
		//console.log(quill.scroll.domNode.innerHTML)
		//console.log(this.content)
		//this.editorHtml = 
	},
	handleChange(value) {
		//console.log(value);
	}
  },
  components: { quillEditor }
}
</script>

<style>
.confirm-btn{
	margin-top: 40px;
	text-align: center;
}
</style>
